 <template>
  <div class="margin-bottom">
    <div class="header" >
      <div class="user-info">
        <div>
          <img class="avatar" v-bind:src="user.avatarUrl" alt="">
          <div class="name">{{user.alias}}</div>
        </div>
      </div>
      <div class="flex-container">
        <div class="item">
          <router-link to="classmates">
            <img class="arrow-icon" src="../../images/icon/student.png" alt="">
            <div>同学</div>
          </router-link>
        </div>
        <div class="item">
          <router-link to="orderList">
            <img src="../../images/icon/list.png" alt="">
            <div>我的订单</div>
          </router-link>
        </div>
        <div class="item">
          <router-link to="scholarship">
            <img src="../../images/icon/integral.png" alt="">
            <div>奖学金</div>
          </router-link>
        </div>
      </div>
    </div>

    <div class="item-container">
      <div class="title">我的项目</div>
      <div class="container">
        <div class="item" v-for="item in list" :key="item.index">
          <router-link v-bind:to="item.url">
            <img v-bind:src="item.icon" alt="">
            <div>{{item.name}}</div>
          </router-link>
        </div>
      </div>

    </div>

    
    <div class="income-container">
      <div class="title">
        <div class="">我的收入</div>

        <router-link to="/scholarship">
          <div class="more-container">
            <div>查看更多</div>
            <img class="arrow-right" src="../../images/icon/arrow.png" alt="">
          </div>
        </router-link>
      </div>
      <div class="list-container">
        <div class="item">
          <div class="price">{{todayIncome}}</div>
          <div>今日收入</div>
        </div>
        <div class="item">
          <div class="price">{{totalIncome}}</div>
          <div>总收入</div>
        </div>
        <div class="item">
          <div class="price">{{weekIncome}}</div>
          <div>本周收入</div>
        </div>
      </div>
    </div>

    <!-- tab导航 -->
    <tabbar></tabbar>
  </div>
</template>

<script>
import tabbar from "src/components/tab/tabbar";
import { incomeRecord } from "../../service/getData";

export default {
  data() {
    return {
      tabbar: "",
           user: {
        avatarUrl: "",
        attr: ""
      },
      todayIncome: "00.00",
      totalIncome: "00.00",
      weekIncome: "00.00",
      avatar:
        "http://img.jituwang.com/uploads/allimg/151003/258203-1510030RP894.jpg",
      username: "张三",
      list: [
        {
          icon: require("../../images/icon/my/record.png"),
          name: "观看记录",
          url: '/record'
        },
        {
          icon: require("../../images/icon/my/vip.png"),
          name: "升级会员",
          url: '/upgrade'
        },
        {
          icon: require("../../images/icon/integral.png"),
          name: "我的积分",
          url: '/integral'
        },
        // {
        //   icon: require("../../images/icon/gift.png"),
        //   name: "我的活动",
        //   url: ''
        // },
        // {
        //   icon: require("../../images/icon/my/community.png"),
        //   name: "我的社群",
        //   url: ''
        // },
        // {
        //   icon: require("../../images/icon/my/test.png"),
        //   name: "我的测试",
        //   url: ''
        // },
        // {
        //   icon: require("../../images/icon/my/send.png"),
        //   name: "赠送记录",
        //   url: ''
        // },
        // {
        //   icon: require("../../images/icon/my/list.png"),
        //   name: "我的助力",
        //   url: ''
        // },
        // {
        //   icon: require("../../images/icon/my/coupon.png"),
        //   name: "我的特惠",
        //   url: ''
        // },
        // {
        //   icon: require("../../images/icon/my/conversion.png"),
        //   name: "我的兑换",
        //   url: ''
        // },
        // {
        //   icon: require("../../images/icon/my/waiting.png"),
        //   name: "敬请期待",
        //   url: ''
        // }
      ]
    };
  },
  components: {
    tabbar
  },
  mounted() {
    this.user = this.$store.userInfo;
    this.init();
  },
  methods: {
        init: function() {
      incomeRecord(this.$store.userToken).then(res => {
        this.todayIncome = res.todayIncome || '0.00';
        this.totalIncome = res.todayIncome || '0.00';
        this.weekIncome = res.todayIncome || '0.00';
      });
    }
  }
  // beforeDestroy() {
  //   clearInterval(this.timer);
  // }
};
</script>

<style lang="scss" scoped>
@import "../../style/mixin";

.margin-bottom {
  margin-bottom: 1.7rem;
}

.header {
  @include sc(0.32rem, #000);
  background: #fff;
  padding: 0.4rem;
  margin: 0.5rem auto;
  width: 94%;
  border-radius: 5px;

  .user-info {
    @include fj(center);
    text-align: center;
    padding-bottom: 0.5rem;
  }

  .avatar {
    height: 2rem;
    width: 2rem;
    border-radius: 50%;
  }

  .name {
    @include sc(0.4rem, #000);
  }

  .flex-container {
    @include fj(space-around);
    .item {
      text-align: center;

      img {
        height: 0.7rem;
        width: 0.7rem;
      }
    }

    // .line::after {
    //   content: "|";
    //   margin: 0 0.7rem;
    // }
  }
}

.item-container {
  @include sc(0.3rem, #333);
  background: #fff;
  margin: 0 auto;
  width: 94%;
  border-radius: 5px;
  // height: 6rem;

  .title {
    @include sc(0.36rem, #333);
    height: 1rem;
    line-height: 1rem;
    padding-left: 0.4rem;
    border-bottom: 2px solid #f1f1f1;
  }

  .container{
    @include fj(flex-start);

    .item {
      @include sc(0.28rem, #999);
      text-align: center;
      // float: left;
      padding: 0.2rem;
      width: 25%;

      img {
        height: 0.7rem;
        width: 0.7rem;
      }
    }
  }

}

.income-container {
  @include sc(0.3rem, #333);
  background: #fff;
  width: 94%;
  border-radius: 5px;
  height: 3rem;
  margin-bottom: 0.2rem;
  margin: 0.2rem auto;

  .title {
    @include fj(space-between);
    @include sc(0.36rem, #333);
    height: 1rem;
    line-height: 1rem;
    padding-left: 0.4rem;
    border-bottom: 2px solid #f1f1f1;

    .more-container {
      @include fj(center);
      align-items: center;

      .arrow-right {
        transform: rotate(270deg);
        height: 0.5rem;
        width: 0.5rem;
      }
    }
  }

  .list-container {
    @include fj(space-around);
    align-items: center;
    text-align: center;
    height: 2rem;

    .price {
      @include sc(0.38rem, #333);
      padding: 0.1rem;
    }
  }
}
</style>
